<template>
  <div class="file-list">
    <div class="file-row-header">
      <div class="fileCol">文件名称</div>
      <div class="fileCol">大小</div>
      <div class="fileCol">状态</div>
      <div class="fileCol">上传进度</div>
      <div class="fileCol">上传大小</div>
      <div class="fileCol">操作</div>
    </div>
    <div
      class="file-row-item progress-row"
      v-for="(item, index) in fileList"
      :style="`--progress-width: ${(item as FileType).progress || 0}%;`"
    >
      <div class="fileCol">{{ (item as FileType).fileName }}</div>
      <div class="fileCol">{{ formatFileSize((item as FileType).fileSize) }}</div>
      <div class="fileCol">
        {{ statusEnum[item.fileStatus] }}
      </div>
      <!-- 上传进度 -->
      <div class="fileCol">
        <span style="margin-right: 10px; font-weight: bold"
          >{{ (item as FileType).progress }}%</span
        >
      </div>
      <!-- 上传大小 -->
      <div class="fileCol">
        <span style="font-size: 14px"
          >{{ formatFileSize((item as FileType).uploadedSize) }} /
          {{ (item as FileType).uploadSpeed }}</span
        >
        <!-- <span style="font-size: 14px">{{ (item as FileType).remainingTime }}</span> -->
      </div>
      <div class="fileCol">
        <ElButton
          type="warning"
          :icon="VideoPause"
          circle
          size=""
          title="暂停上传"
          @click="pause(item)"
          :disabled="isUpLoading === false"
        />
        <ElButton
          type="success"
          :disabled="item.fileStatus === 'uploading'"
          :icon="VideoPlay"
          circle
          size=""
          title="继续上传"
          @click="keepUp(item)"
        />
        <ElButton
          type="danger"
          :icon="CircleCloseFilled"
          circle
          size=""
          title="删除任务"
          @click="delFile(item)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElButton } from 'element-plus'
import type { FileType } from '@/plugins/LargeFileUpload/init'
import { VideoPause, VideoPlay, CircleCloseFilled } from '@element-plus/icons-vue'
import { watch } from 'vue'

const props = defineProps({
  fileList: {
    default: () => [] as unknown as FileType[],
  },
  delFile: {
    type: Function,
    default: () => {},
  },
  isUpLoading: {
    type: Boolean,
    default: false,
  },
  pause: {
    type: Function,
    default: () => {},
  },
  keepUp: {
    type: Function,
    default: () => {},
  },
  // 格式化文件大小
  formatFileSize: {
    type: Function,
    default: () => {},
  },
  statusEnum: {
    type: Object,
    default: () => {},
  },
})

watch(
  () => props.fileList,
  (newVal, oldVal) => {
    console.log('fileList 变化', newVal, oldVal)
  },
)
</script>

<style scoped lang="scss">
.file-list {
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  min-height: 300px;
  .file-row-header {
    color: #909399;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    height: 40px;
    .fileCol {
      flex: 1;
      text-align: center;
    }
  }
  .file-row-item {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    .fileCol {
      flex: 1;
      text-align: center;
    }
  }
  .progress-row {
    width: 100%;
    height: 40px;
    // background-color: #e0e0e0; /* 默认背景颜色 */
    position: relative;
    overflow: hidden;
    /* 进度条填充部分 */
    &::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      // background-color: #67c23a4d; /* 填充颜色 */
      background: linear-gradient(45deg, #00b09b36, #96c93d1a); /* 填充颜色 */
      width: var(--progress-width); /* 初始宽度 */
      transition: width 0.5s ease; /* 平滑过渡效果 */
    }
  }
}
</style>
